<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>${_title}</title>

    <!-- Bootstrap core CSS -->

    <link href="${_css}/bootstrap.min.css" rel="stylesheet">

    <link href="${_font}/css/font-awesome.min.css" rel="stylesheet">
    <link href="${_css}/animate.min.css" rel="stylesheet">

    <!-- Custom styling plus plugins -->
    <link href="${_css}/custom.css" rel="stylesheet">
    <link href="${_css}/icheck/flat/green.css" rel="stylesheet">
    <link href="${_css}/datatables/tools/css/dataTables.tableTools.css" rel="stylesheet">
	<link rel="stylesheet" href="${_css}/base.css">
    <script src="${_js}/jquery.min.js"></script>
    <script src="${_js}/resize.js"></script>
	<script type="text/javascript" src="${_front_js}/jquery.page.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
	<style>
		td a{
			cursor:pointer
		}
	</style>
</head>


<body style="background: #F7F7F7;">
<div class="">
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="x_panel">
	            <div class="x_title">
					<h2>用户组列表</h2>
					<div class="clearfix"></div>
				</div>
                <div class="pull-right">
                	<button id="send" type="button" class="btn btn-success" data-toggle="modal" data-target=".add-user">添加管理员</button>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="scroll">
                <div class="x_content">
                    <table id="example" data-action="/admin/list?1=1" class="table table-striped responsive-utilities jambo_table">
                        <thead>
                            <tr class="headings">
                                <th>
                                    <input type="checkbox" class="tableflat">
                                </th>
                                <th>序号 </th>
                                <th>用户名称</th>
                                <th>密码</th>
                                <th>状态</th>
                                <th>用户组</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
			                <#if (pageInfo?exists & pageInfo.pageList?size > 0)>
								<#list pageInfo.pageList as model>
									<tr class="even pointer">
		                                <td class="a-center ">
		                                    <input type="checkbox" class="tableflat">
		                                </td>
		                                <td>
		                                	${model_index+1}
		                                </td>
		                                <td>
		                                	<#if model.userName?exists>
		                                		${model.userName}
		                                	</#if>
		                                </td>
		                                <td>
		                                	<#if model.password?exists>
		                                		${model.password}
		                                	</#if>
		                                </td>
		                                <td>
		                                	<#if model.status?exists>
		                                		<#if model.status == "N">
		                                			有效
		                                		<#elseif model.status == "Y">
		                                			无效
		                                		</#if>
		                                	</#if>
		                                </td>
		                                <td>
		                                	<#if model.groupName?exists>
		                                		${model.groupName}
		                                	</#if>
		                                </td>
		                                <td>
		                                	<#if model.createTime?exists>
		                                		${(model.createTime?string("yyyy-MM-dd HH:mm:ss"))!}	     
		                                	</#if>
		                                </td>
		                                <td>
		                                	<a class="btn-check" data-id="${model.id}" href="/admin/settingUserGroup?id=${model.id}">编辑</a>
		                                </td>
		                             </tr>   
		                        </#list>
								<#else>
								<tr class="even pointer">
									<td colspan="11">无记录</td>
								</tr>
							</#if>
                        </tbody>
                    </table>
                    <#if (pageInfo.pageList?size > 0)>
	                	<#include "../base/Page.ftl">
	                </#if>
                </div>
            </div>
        </div>
        <br />
        <br />
        <br />
    </div>
    <!--添加管理员 -->
	<div class="modal fade bs-example-modal-sm add-user" tabindex="-1" role="dialog" aria-hidden="true">
	    <div class="modal-dialog modal-sm about-bank" style="width:700px;height:500px">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
	                </button>
	                <h4 class="modal-title" id="myModalLabel2">添加管理员</h4>
	            </div>
	            <div class="modal-body">
	                 <form class="form-horizontal form-label-left" novalidate>
						<div class="item form-group">
	                        <label class="control-label col-md-4 col-sm-4 col-xs-12" for="name">用户名
	                        </label>
	                        <div class="col-md-8 col-sm-8 col-xs-12">
	                            <input id="username" class="form-control col-md-8 col-xs-12" type="text">
	                        </label>
	                        </div>
	                    </div>
	                    <div class="item form-group">
	                        <label class="control-label col-md-4 col-sm-4 col-xs-12" for="name">密码
	                        </label>
	                        <div class="col-md-8 col-sm-8 col-xs-12">
	                            <input type="password" id="password" class="form-control col-md-7 col-xs-12" type="text">
	                        </label>
	                        </div>
	                    </div>
	                    <div class="item form-group">
	                        <label class="control-label col-md-4 col-sm-4 col-xs-12">用户组
	                        </label>
	                        <#if (groups?exists && groups?size>0) >
                    			<#list groups as model>
                    				<input type="radio" id="group" class="flat result" name="group" value="${model.id}">${model.name}
                    				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            	</#list>
                			</#if>
	                    </div>
	                 </form>   
	            </div>
	            <div class="modal-footer">
	                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	                <button type="button" class="btn btn-primary check-submit user-submit">提交</button>
	            </div>
	        </div>
	    </div>
	</div>
</div>
                    
        <script src="${_js}/bootstrap.min.js"></script>
        
        <!-- bootstrap progress js -->
        <script src="${_js}/progressbar/bootstrap-progressbar.min.js" type="text/javascript"></script>
        <script src="${_js}/nicescroll/jquery.nicescroll.min.js" type="text/javascript"></script>
        <!-- icheck -->
        <script src="${_js}/icheck/icheck.min.js" type="text/javascript"></script>

        <script src="${_js}/custom.js" type="text/javascript"></script>
	    <!-- PNotify -->
	    <script src="${_js}/notify/pnotify.core.js" type="text/javascript"></script>
	    <script src="${_js}/notify/pnotify.buttons.js" type="text/javascript"></script>
	    <script src="${_js}/notify/pnotify.nonblock.js" type="text/javascript" ></script>
	    <script>
		    $(document).ready(function () {
		        $('input.tableflat').iCheck({
		            checkboxClass: 'icheckbox_flat-green',
		            radioClass: 'iradio_flat-green'
		        });
		    });
		    
		    function initData(action) { 
				window.location.href=action;
			} 
			
			$(".btn-info").click(function(){
				initData($("#example").attr('data-action'));
			});
			
			$(".user-submit").click(function(){
		    	var userName = $.trim($("#username").val());
	    		var password = $.trim($("#password").val());
	    		var groupId = $("input[name='group']:checked").val();
				if(userName == ""){
					alert("请输入用户名！");
					return;
				}
				if(userName.length <4 || userName.length>20){
					alert("用户名长度必须在4-20位字符！");
					return;
				}
				if(password == ""){
					alert("请输入密码！");
					return;
				}
				if("undefined" == typeof groupId){
					alert("请选择用户组！");
					return;
				}
	    		var sysUser=JSON.stringify({
		   			userName:userName,
		   			password:password,
		   			groupId:groupId
		   		});
		   		$.ajax({
		            type: 'post',
		            dataType: 'JSON',
		            async:'false',
		            headers: {'Content-type': 'application/json;charset=UTF-8'},
		            url: '/admin/user/save',
		            data:sysUser,
		            success: function(result){
		            	alert(result.msg);
						if(result.code==-1){
				        	window.location.href="/admin/list";	            		 	
						}
		            }
		        }); 
	    	});
		</script>
</body>

</html>